<template>
  <div class="notice-wrap">
    <div class="notice"
         v-for="(obj,index) in notice"
         :key="index">
      <div class="notice-head">
        <van-icon name="todo-list"
                  size="26"
                  color="#87d4eb"
                  style="vertical-align: -20%;margin-right:5px;" />
        <span>{{obj.head}}</span>
      </div>
      <div class="notice-items">

        <div class="notice-item"
             v-for="(item,cindex) in obj['list']"
             :key="cindex"
             @click=handleRoute(item.id)>
          <div class='notice-item-box'>
            <p class="notice-title">
              <van-icon name="circle"
                        size="10"
                        color="#fdb52b" />&nbsp;{{item['title']}}
              <!-- <van-icon badge="NEW"
                        style="margin-left:20px;margin-right:10px;margin-bottom:13px;"> </van-icon> -->
            </p>
            <p class="notice-date">&nbsp;&nbsp;&nbsp;&nbsp;{{item['date']}}</p>
          </div>
          <van-icon class="notice-item-arrow"
                    name="arrow"
                    color="#fdb52b"
                    size="15" />

        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  setup () {
  },
  data () {
    return {
      notice: [{
        head: '系统公告',
        list: [
          { id: 1, title: '关于原型设计的一些描述', date: '2021.5.13', details: 'words' },
          { id: 2, title: '公告B', date: '2021.5.17', details: 'words222' }]
      }, {
        head: '海底探索',
        list: [
          { id: 3, title: '通知A', date: '2021.5.13', details: 'words111' },
          { id: 4, title: '澳巴拉斯的公司应该都要告诉预估费用税负公司研发的', date: '2021.5.17', details: 'words22222' }]
      }, {
        head: '厨房里的科学',
        list: [
          { id: 5, title: '公告A', date: '2021.5.13', details: 'words' },
          { id: 6, title: '公告B', date: '2021.5.17', details: 'words222' }]
      }]
    }
  },
  methods: {
    handleRoute (idx) {
      this.$router.push({ name: 'NoticeDetail', params: { id: idx } })
    }
  }
}
</script>
<style lang="scss" scoped>
p {
  display: inline-block;
  width: 260px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.notice-wrap {
  .notice {
    padding: $margin-horizon;
    margin: $margin-horizon;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5);
    background-color: #fff;
    border-radius: $border-radius;
    &-head {
      position: relative;
      span {
        font-size: $fontsize-3;
        font-weight: 700;
        color: $theme-color6;
      }
    }
    &-item {
      line-height: 50px;
      height: 50px;
      position: relative;
      &-box {
        // display: flex;
        // flex-direction: column;
        height: 30px;
      }
      &-arrow {
        // 拓宽按键面积
        width: 100vw;
        text-align: right;
        position: absolute;
        right: 5px;
        top: 24px;
      }
    }
    &-title {
      font-size: $fontsize-4;
      margin-top: 0px;
    }
    &-date {
      display: block;
      margin-top: -65px;
      color: $theme-color6;
      font-size: $fontsize-5;
    }
  }
}
</style>
